<template>
  <div>
    <tinymceVue v-model="html" :init="init"></tinymceVue>
  </div>
</template>

<script>
import tinymce from 'tinymce';
import 'tinymce/themes/silver/theme'
import 'tinymce/skins/ui/oxide/skin.css'
//导入图标
import 'tinymce/icons/default'
import tinymceVue from '@tinymce/tinymce-vue';
import '@/assets/zh_CN'
//引入插件
import 'tinymce/plugins/image'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/help'
export default {
  components:{tinymceVue},
  props:{
    value:[String,Object,Array,Boolean,Number],
    height: {
      type:[Number,String],
      default:600
    }
  },
  data(){
    return{
      init:{
        language:'zh_CN',
        plugins: ['link lists image code table  wordcount help'],
        toolbar: ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table  fontsizeselect  fontselect emoticons forecolor backcolor fullscreen '],
        images_upload_handler: (blobInfo, success) => {
          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          success(img)
        },
        height:this.height
      },
      html:'<h1>请输入。。。</h1>'
    }
  },
  watch:{
    html(){
      this.$emit('input',this.html)
    },
    value(){
      this.html = this.value
    }
  },
  mounted() {
    tinymce.init({})
    this.html = this.value
  },
  updated() {
    this.html = this.value
  }
}
</script>

<style scoped>

</style>
